<template>
    <el-radio-group v-model="isCollapse" class="collapse" >
      <el-radio-button :label="false">展开</el-radio-button>
      <el-radio-button :label="true">收起</el-radio-button>
    </el-radio-group>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose"
    >
      <el-menu-item  index="1" @click="router.push('/index')"  v-if="role=='超级管理员'">
         <el-icon><House /></el-icon>
         <template #title>首页</template>   
      </el-menu-item >
      <el-menu-item index="2" @click="router.push('/data')"  v-if="role=='超级管理员'">
        <el-icon><Notebook /></el-icon>
        <template #title>数据统计</template>
      </el-menu-item>
      <el-menu-item index="3" @click="router.push('/order')">
        <el-icon><document /></el-icon>
        <template #title>订单管理</template>
      </el-menu-item>


     

    

          <el-sub-menu index="4">
            
            <template #title>{{ isCollapse==true?'商品':'商品管理' }}</template>
            <el-menu-item index="4-1" @click="router.push('/gategory')">
              <el-icon><Memo /></el-icon>
              <template #title>分类管理</template>
            </el-menu-item>
            <el-menu-item index="4-2" @click="router.push('/dish')">
              <el-icon><Dish /></el-icon>
              <template #title>菜品管理</template>
            </el-menu-item>
            <el-menu-item index="4-3" @click="router.push('/taocan')">
              <el-icon><KnifeFork /></el-icon>
              <template #title>套餐管理</template>
            </el-menu-item>

          </el-sub-menu>


      <el-menu-item index="5" @click="router.push('/user')" v-if="role=='超级管理员'">
        <el-icon><User /></el-icon>
        <template #title>员工管理</template>
      </el-menu-item>

      <el-menu-item index="6" @click="router.push('/flavour')">
        <el-icon><Cellphone /></el-icon>
        <template #title>口味管理</template>
      </el-menu-item>
      <el-menu-item index="7" @click="router.push('/tag')">
        <el-icon><PriceTag /></el-icon>
        <template #title>标签管理</template>
      </el-menu-item>
     
      <el-menu-item index="8" @click="Nokaifa"  v-if="role=='超级管理员'">
        <el-icon><Monitor /></el-icon>
        <template #title>营销</template>
      </el-menu-item>

    </el-menu>
  </template>
  
  <script lang="ts" setup>
  import { ref,onMounted } from 'vue'
  import {useRouter} from 'vue-router'
  import { ElMessage } from 'element-plus';
  import { useStore } from 'vuex';

  import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
  } from '@element-plus/icons-vue'
  
  const router = useRouter()
  const store = useStore()
   

 //获取用户角色
  

  const role = ref('')

  onMounted(()=>{
      role.value = store.state.userinfo.role
  })



  const isCollapse = ref(false)
  const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }

  

  
const Nokaifa = ()=> {ElMessage({message:'该功能暂未开发',type:'warning'})}


  </script>
  
  <style>
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }

  /* 折叠 */
  .collapse{
     /* position: relative;
     bottom: 300px; */
     margin-top: 10px;
  }

  </style>